<template>
  <div>
    <div style="text-align: right; margin-bottom: 5px;">
      <el-button style="width: 7%; text-align: center;" v-if="searchFlag == true" @click="returnNormal()"
        >返回</el-button
      >

      <el-input
        placeholder="模糊查询标题"
        v-model="searchName"
        suffix-icon="el-icon-search"
        style="width: 30%;"
        @keyup.enter.native="searchSubmit"
      />
    </div>
    <div v-loading="loading">
      <el-table :data="blogData" style="width: 100%;" :border="true">
        <el-table-column label="标题" width="400">
          <template slot-scope="scope">
            <i class="el-icon-tickets"></i>
            <span style="margin-left: 10px;">{{ scope.row.title }}</span>
          </template>
        </el-table-column>

        <el-table-column label="发布时间" width="220">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px;">{{ getTime(scope.row.time) }}</span>
          </template>
        </el-table-column>

        <el-table-column label="用户" width="250">
          <template slot-scope="scope">
            <i class="el-icon-user"></i>
            <span style="margin-left: 10px;">{{ scope.row.user.name }}</span>
          </template>
        </el-table-column>

        <el-table-column label="状态" width="180">
          <template slot-scope="scope">
            <i class="el-icon-wind-power"></i>
            <span style="margin-left: 10px;" v-if="scope.row.state == 1">正常</span>
            <span style="margin-left: 10px; color: #f56c6c;" v-if="scope.row.state == 0">已删除</span>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              v-if="scope.row.state == 1"
              type="warning"
              plain
              @click="renewOrdeleteBlog(scope.row.id, 0)"
            >
              删除
            </el-button>
            <el-button
              size="mini"
              v-if="scope.row.state == 0"
              type="success"
              plain
              @click="renewOrdeleteBlog(scope.row.id, 1)"
            >
              恢复
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <br />
    <div style="padding-bottom: 4%;">
      <el-pagination
        :page-size="pageSize"
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="currentChange"
        :current-page="currentPage"
        @prev-click="currentPage = currentPage - 1"
        @next-click="currentPage = currentPage + 1"
        :hide-on-single-page="true"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import blog from '@/api/blog'
import date from '@/utils/date'

export default {
  name: 'blogManage',
  data() {
    return {
      blogData: [],
      total: 0, //数据总数
      pageSize: 10, //每页显示数量
      currentPage: 1, //当前页数
      loading: true,
      searchName: '',
      searchFlag: false, //搜索状态 true 显示搜索数据 false显示正常数据
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      if (this.searchFlag) {
        blog.adminSearchBlog(this.searchName, this.currentPage, this.pageSize).then((res) => {
          this.blogData = res.data.rows
          this.total = res.data.total
          this.loading = false
        })
      } else {
        blog.adminGetBlog(this.currentPage, this.pageSize).then((res) => {
          this.blogData = res.data.rows
          this.total = res.data.total
          this.loading = false
        })
      }
    },
    currentChange(currentPage) {
      //页码更改事件处理
      this.currentPage = currentPage
      this.load()
      scrollTo(0, 0)
    },
    searchSubmit() {
      this.currentPage = 1
      this.loading = true
      this.searchFlag = true
      this.load()
    },
    returnNormal() {
      this.currentPage = 1
      this.searchName = ''
      this.loading = true
      this.searchFlag = false
      this.load()
    },
    getTime(time) {
      return date.timeago(time)
    },
    renewOrdeleteBlog(id, status) {
      this.$confirm(status == 0 ? '是否删除此博客?' : '是否恢复此博客?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          blog.adminDeleteBlog(id, status).then((res) => {
            this.$message({
              message: status == 0 ? '删除成功' : '恢复成功',
              type: 'success',
            })
            this.load()
          })
        })
        .catch(() => {})
    },
  },
}
</script>
